<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
	</head>
	<body>
		<p>完整的盒子 margin + border + padding + width/height</p>
		<div style="width: 100px; height: 100px; background: #0000FF; margin: 30px; border: solid 4px black; padding: 20px;"></div>
		
		<p>内边距/填充会向内挤压内部元素</p>
		<div style="width: 100px; height: 100px; background: #0000FF;">
			<div style="width: 40px; height: 40px; background: #008000;">
				
			</div>
		</div>
		
		<br><br><br><br><br><br>
		
		<div style="width: 100px; height: 100px; background: gray; margin: 50px; float: left;">
		</div>
		<div style="width: 100px; height: 100px; background: pink; margin: 50px; float: left">
		</div>
		
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		
		<div style="width: 100px; height: 100px; background: gray; margin: 50px; ">
		</div>
		<div style="width: 100px; height: 100px; background: pink; margin: 50px;">
		</div>
		
		
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		
		<div style="width: 100px; height: 100px; background: gray; ">
			
		</div>
		<div style="width: 100px; height: 100px; background: darkgoldenrod;  overflow: auto;">
			<div style="width: 80px; height: 80px; background: salmon; margin: 50px; "> </div>
		</div>
	</body>
</html>